<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/homepage.css" />

</head>

<body>
    <div id="wrap" class="flex-wrap flex-vertical">
        <header>
            <ul>
                <li class="border-b active">易贝</li>
                <li class="border-b">端API</li>
                <li class="border-b">新闻资讯</li>
                <li class="border-b">个人中心</li>
            </ul>
        </header>
        <div id="main" class="flex-con">

        </div>
        <div id="footer" class="border-t">
            <ul class="flex-wrap">
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active">首页</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">行情</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">新闻</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">我的</li>
            </ul>
        </div>
    </div>
</body>

</html>
<script src="./script/third/flexied.js"></script>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            style: 'dark',
            color: '#6ab494'
        });
        funIniGroup();
    }

    function funIniGroup() {
        var eHeaderLis = $api.domAll('header li'),
            frames = [];
        for (var i = 0, len = eHeaderLis.length; i < len; i++) {
            frames.push({
                name: 'frame' + i,
                url: './html/homepage/frame' + i + '.html',
                bounces: true
            })
        }
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight
            },
            index: 0,
            frames: frames
        }, function(ret, err) {

        });
    }

    // 随意切换按钮
    function randomSwitchBtn(tag) {
        if (tag == $api.dom('#footer li.active')) return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;
        for (var i = 0, len = eFootLis.length; i < len; i++) {
            if (tag == eFootLis[i]) {
                index = i;
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls(eFootLis[index], 'active');
        $api.addCls(eHeaderLis[index], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });
    }
</script>
